<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function()
			{
				let btns = document.querySelectorAll('button');
				let tmp = 0;
				for(let i = 0; i < btns.length; i++)
				{
					btns[i].onclick = function()
					{	
						// 思路1
						// for(let j = 0; j < btns.length ; j++)
						// {
						// 	btns[j].style.background = '';
						// }
						
						// 思路2：记录上一次点击按钮的下标，然后把之前点击的按钮的背景颜色还原，再把现在要点击的按钮的背景颜色换位黄色
						btns[tmp].style.background = '';
						btns[i].style.background = 'yellow';
						tmp = i;
					}
				}
			}			
		</script>
	</head>
	<body>
		<button>历史</button>
		<button>语文</button>
		<button>数学</button>
		<button>物理</button>
	</body>
</html>